
Ext.require([
    'Ext.window.MessageBox',
	'Ext.panel.Panel',
	'Ext.form.Panel',
    'Ext.tip.*'
]);




Ext.onReady(function(){


var numberonlystr = /[\d]/;
	Ext.apply(Ext.form.field.VTypes, {
	    numberonly:  function(v) {
	        return numberonlystr.test(v);
	    },
	    numberonlyText: 'Must be a numeric input.',
	    numberonlyMask: /[\d\.]/i
	});

Ext.define('CompanyLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'companycode',
		type: 'string'
	},{
		name: 'companyname',
		type: 'string'
	}]
});		

Ext.define('PositionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'positioncode',
		type: 'string'
	},{
		name: 'positionname',
		type: 'string'
	}]
});	

Ext.define('LevelLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'levelcode',
		type: 'string'
	},{
		name: 'levelname',
		type: 'string'
	}]
});	

Ext.define('CostcenterLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'costcentercode',
		type: 'string'
	},{
		name: 'costcentername',
		type: 'string'
	}]
});	

Ext.define('BrandLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'brandcode',
		type: 'string'
	},{
		name: 'brandname',
		type: 'string'
	}]
});	

Ext.define('DivisionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'divisioncode',
		type: 'string'
	},{
		name: 'divisionname',
		type: 'string'
	}]
});	

Ext.define('DepartmentLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'departmentcode',
		type: 'string'
	},{
		name: 'departmentname',
		type: 'string'
	}]
});	

Ext.define('SectionLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'sectioncode',
		type: 'string'
	},{
		name: 'sectionname',
		type: 'string'
	}]
});	

Ext.define('GenderLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'gendercode',
		type: 'string'
	},{
		name: 'gendername',
		type: 'string'
	}]
});	

Ext.define('CivilstatusLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'civilstatuscode',
		type: 'string'
	},{
		name: 'civilstatusname',
		type: 'string'
	}]
});	

Ext.define('EmploymentstatusLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'employmentstatuscode',
		type: 'string'
	},{
		name: 'employmentstatusname',
		type: 'string'
	}]
});	

Ext.define('CauseofseparationLK', {
	extend: 'Ext.data.Model',
	fields: [{
		name: 'causeofseparationcode',
		type: 'string'
	},{
		name: 'causeofseparationname',
		type: 'string'
	}]
});	

var causeofseparationlk = Ext.create('Ext.data.Store', {
					model: 'CauseofseparationLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/causeofseparation.cfm',
						reader: {
							type: 'json',
							root: 'causeofseparationlk'  
						}
						
					},
					autoLoad: true
				    
			  });

var employmentstatuslk = Ext.create('Ext.data.Store', {
					model: 'EmploymentstatusLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/employmentstatus.cfm',
						reader: {
							type: 'json',
							root: 'employmentstatuslk'
						}
						
					},
					autoLoad: true
				    
			  });

var civilstatuslk = Ext.create('Ext.data.Store', {
					model: 'CivilstatusLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/civilstatus.cfm',
						reader: {
							type: 'json',
							root: 'civilstatuslk'
						}
						
					},
					autoLoad: true
				    
			  });

var genderlk = Ext.create('Ext.data.Store', {
					model: 'GenderLK',
					data: [{
						gendercode: 'M',
						gendername: 'Male'
					},{
						gendercode: 'F',
						gendername: 'Female'
					}]
				    
			  });

var sectionlk = Ext.create('Ext.data.Store', {
					model: 'SectionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/section.cfm',
						reader: {
							type: 'json',
							root: 'sectionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var departmentlk = Ext.create('Ext.data.Store', {
					model: 'DepartmentLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/department.cfm',
						reader: {
							type: 'json',
							root: 'departmentlk'
						}
						
					},
					autoLoad: true
				    
			  });

var divisionlk = Ext.create('Ext.data.Store', {
					model: 'DivisionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/division.cfm',
						reader: {
							type: 'json',
							root: 'divisionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var brandlk = Ext.create('Ext.data.Store', {
					model: 'BrandLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/brand.cfm',
						reader: {
							type: 'json',
							root: 'brandlk'
						}
						
					},
					autoLoad: true
				    
			  });

var costcenterlk = Ext.create('Ext.data.Store', {
					model: 'CostcenterLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/costcenter.cfm',
						reader: {
							type: 'json',
							root: 'costcenterlk'
						}
						
					},
					autoLoad: true
				    
			  });

var levellk = Ext.create('Ext.data.Store', {
					model: 'LevelLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/level.cfm',
						reader: {
							type: 'json',
							root: 'levellk'
						}
						
					},
					autoLoad: true
				    
			  });
			  
var positionlk = Ext.create('Ext.data.Store', {
					model: 'PositionLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/position.cfm',
						reader: {
							type: 'json',
							root: 'positionlk'
						}
						
					},
					autoLoad: true
				    
			  });

var companylk =	Ext.create('Ext.data.Store', {
					model: 'CompanyLK',
					proxy: {
						type: 'ajax',
						url: '../../../data/lookup/companydsn.cfm',
						reader: {
							type: 'json',
							root: 'companylk'
						}
						
					},
					autoLoad: true
				    
			   });

var formClearance =  Ext.create('Ext.form.Panel', {
	
						title: 'iBOSe Clearance Form',
						titleAlign: 'center',
					    width: '100%',
						height: '100%',
						layout: {
							type: 'vbox',
							align: 'center'
						},
						items: [{
							xtype: 'panel',
							width: '42%',
							layout: {
								type: 'vbox',
								align: 'left'
							},
							items: [{
								xtype: 'combobox',
								fieldLabel: 'Company',
								editable: false,
								width: 400,
								allowBlank: false,
								name: 'thecompany',
								queryMode: 'server',
								store: companylk,
								displayField: 'companyname',
								valueField: 'companycode',
								cls: 'field-margin'
							},{ 
								xtype: 'textfield',
								fieldLabel: 'Personnel ID',
								width: 400,
								maxLength: 50,
								allowBlank: false,
								name: 'personnelid',
								cls: 'field-margin',
								listeners: {
									blur: function( thiss, The, eOpts ) {
										var parentForm = thiss.up('form');
										var formValues = parentForm.getValues();
										
										if (formValues.thecompany.length < 1 ) {
											Ext.Msg.show({
									  				title: 'No company selected.',
									  				msg: 'Please select a company.',
									  				buttons: Ext.Msg.OK,
									  				icon: Ext.Msg.WARNING
									  			});
											return false;
										}
										
										formClearance.getForm().load({
											url: '../../../app/controller/clearance/onlineclearanceform/load.cfm',
											method: 'post',
											params: {
												companydsn: formValues.thecompany,
												employeenumber: formValues.personnelid
											},
											//waitMsg: 'Updating form, please wait...',
											//waitTitle: 'Updating...',
											failure: function(form, action){
									  			Ext.Msg.show({
									  				title: 'Failed to update',
									  				msg: 'There is a problem in loading the clearance form.',
									  				buttons: Ext.Msg.OK,
									  				icon: Ext.Msg.ERROR
									  			});
												//console.log(action.result.form[0].detail);
									  		},
									  		success: function(form, action){
									  			//Ext.Msg.alert('Status', 'Form loaded successfully.');
									  		}
										});
									}
								}
							},{
								xtype: 'container',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'textfield',
									fieldLabel: 'Last name',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'lastname',
									cls: 'field-margin'
								},{
									xtype: 'textfield',
									fieldLabel: 'First name',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'firstname',
									cls: 'field-margin'
								},{
									xtype: 'textfield',
									fieldLabel: 'Middle name',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'middlename',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'datefield',
									fieldLabel: 'Date Received Resignation letter',
									allowBlank: false,
								    width: 210,
									labelAlign: 'top',
									name: 'datereceivedrletter',
									cls: 'field-margin'
								},{
									xtype: 'datefield',
									fieldLabel: 'Date Accomplished',
									readOnly: true,
									value: new Date(),
									allowBlank: false,
									width: 210,
									labelAlign: 'top',
									name: 'dateaccomplished',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'textfield',
									fieldLabel: 'Ext',
									allowBlank: false,
									labelAlign: 'top',
									name: 'ext',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Position',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'position',
									queryMode: 'server',
									store: positionlk,
									minChars: 1,
									displayField: 'positionname',
									valueField: 'positioncode',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Level',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: levellk,
									minChars: 1,
									displayField: 'levelname',
									valueField: 'levelcode',
									name: 'level',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Cost Center Code',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: costcenterlk,
									minChars: 1,
									displayField: 'costcentername',
									valueField: 'costcentercode',
									name: 'costcenter',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'combobox',
									fieldLabel: 'Brand or Group',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: brandlk,
									minChars: 1,
									displayField: 'brandname',
									valueField: 'brandcode',
									name: 'brandorgroup',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Division',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: divisionlk,
									minChars: 1,
									displayField: 'divisionname',
									valueField: 'divisioncode',
									name: 'division',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Department/Store',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: departmentlk,
									minChars: 1,
									displayField: 'departmentname',
									valueField: 'departmentcode',
									name: 'departmentorstore',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Section',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: sectionlk,
									minChars: 1,
									displayField: 'sectionname',
									valueField: 'sectioncode',
									name: 'section',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'combobox',
									fieldLabel: 'Gender',
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'local',
									store: genderlk,
									minChars: 1,
									displayField: 'gendername',
									valueField: 'gendercode',
									name: 'gender',
									cls: 'field-margin'
								},{
									xtype: 'datefield',
									fieldLabel: 'Birth Date',
									allowBlank: false,
									labelAlign: 'top',
									name: 'birthdate',
									listeners: {
										change: function(field,value) {
													var d1=new Date(value);
													var d2=new Date();
													var milli=d2-d1;
													var milliPerYear=1000*60*60*24*365.26;
													var yearsApart=milli/milliPerYear;
													yearsApart = Math.floor(yearsApart);
													var formPanel = field.up('form');
													var form = formPanel.getForm();
													form.setValues([{
														id: 'onlyage',
														value: yearsApart
													}]);
													
												}
									},
									cls: 'field-margin'
								},{
									xtype: 'numberfield',
									allowBlank: false,
									fieldLabel: 'Age',
									id: 'onlyage',
									labelAlign: 'top',
									value: 0,
									minValue: 0,
									maxValue: 99,
									name: 'age',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Civil Status',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									queryMode: 'server',
									store: civilstatuslk,
									minChars: 1,
									displayField: 'civilstatusname',
									valueField: 'civilstatuscode',
									name: 'civilstatus',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'textfield',
									fieldLabel: 'Address',
									maxLength: 255,
									allowBlank: false,
									labelAlign: 'top',
									name: 'address',
									cls: 'field-margin'
								},{
									xtype: 'textfield',
									fieldLabel: 'Mobile Number',
									maxLength: 15,
									vtype: 'numberonly',
									allowBlank: false,
									labelAlign: 'top',
									name: 'mobilenumber',
									cls: 'field-margin'
								},{
									xtype: 'textfield',
									fieldLabel: 'Email Address',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'email',
									vtype: 'email',
									cls: 'field-margin'
								},{
									xtype: 'datefield',
									fieldLabel: 'Date Hired',
									allowBlank: false,
									labelAlign: 'top',
									name: 'datehired',
									cls: 'field-margin'
								}]
							},{
								xtype: 'panel',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'datefield',
									fieldLabel: 'Effective Date of Resignation',
									allowBlank: false,
									width: 200,
									labelAlign: 'top',
									name: 'effectivedater',
									cls: 'field-margin'
								},{
									xtype: 'numberfield',
									fieldLabel: 'Tenure per year',
									allowBlank: false,
									labelAlign: 'top',
									name: 'tenureperyear',
									cls: 'field-margin'
								},{
									xtype: 'numberfield',
									fieldLabel: 'Tenure per month',
									allowBlank: false,
									labelAlign: 'top',
									name: 'tenurepermonth',
									cls: 'field-margin'
								}]
							},{
								xtype: 'container',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'combobox',
									fieldLabel: 'Employment Status',
									allowBlank: false,
									maxLength: 20,
									labelAlign: 'top',
									queryMode: 'server',
									store: employmentstatuslk,
									minChars: 1,
									displayField: 'employmentstatusname',
									valueField: 'employmentstatuscode',
									name: 'employmentstatus',
									cls: 'field-margin'
								},{
									xtype: 'textfield',
									fieldLabel: 'Immediate Superior',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'immediatesuperior',
									cls: 'field-margin'
								}]
							},{
								xtype: 'container',
								width: '100%',
								layout: {
									type: 'hbox',
									align: 'stretch'
								},
								items: [{
									xtype: 'textfield',
									fieldLabel: 'Department Head',
									maxLength: 50,
									allowBlank: false,
									labelAlign: 'top',
									name: 'departmenthead',
									cls: 'field-margin'
								},{
									xtype: 'combobox',
									fieldLabel: 'Cause of Separation',
									maxLength: 20,
									queryMode: 'server',
									store: causeofseparationlk,
									minChars: 1,
									displayField: 'causeofseparationname',
									valueField: 'causeofseparationcode',
									allowBlank: false,
									labelAlign: 'top',
									name: 'causeofseparation', 
									cls: 'field-margin'
								}]
							},{
								xtype: 'checkboxfield',
								fieldLabel: 'I accept the terms',
								allowBlank: false,
								labelWidth: 150,
								checked: false,
								cls: 'field-margin',
								listeners: {
									change: function(thiss, newval, oldval, eOpts) {
									  if(newval == true) {
									  	var bropanel = Ext.getCmp('buttonsubmitid');
							                bropanel.setVisible(true); 
									  }	else {
									  	var bropanel = Ext.getCmp('buttonsubmitid');
							                bropanel.setVisible(false); 
									  }
										
									}
								},
								name: 'iaccepttheterms'
							}]
						}],
						
						renderTo: Ext.getBody(),
						
						buttons: [{
						hidden: true,
		                id: 'buttonsubmitid',
						text: 'Submit Clearance Form',
						handler: function() {
						  if (formClearance.getForm().isValid()) {
						  	formClearance.submit({
						  		url: '../../../app/controller/clearance/onlineclearanceform/submit.cfm',
						  		reset: true,
						  		method: 'POST',
						  		waitMsg: 'Submitting clearance form...Please wait...',
						  		failure: function(form, action){
						  			
									Ext.Msg.show({
						  				title: 'Failed to submit',
						  				msg: 'There is a problem in submitting the clearance form. ' + action.result.form[0].detail + ' ' + action.result.form[0].message,
						  				buttons: Ext.Msg.OK,
						  				icon: Ext.Msg.ERROR
						  			});
									
									
						  		},
						  		success: function(form, action){
						  			Ext.Msg.alert('Status', 'Form submitted successfully. ID: ' + action.result.form[0].detail);
						  		}
						  	});
						  } else {
						  	        Ext.Msg.show({
						  				title: 'Invalid field value',
						  				msg: 'Please provide correct values for the fields.',
						  				buttons: Ext.Msg.OK,
						  				icon: Ext.Msg.WARNING
						  			});
						  }
						}
					}]
					    
					 
	});



});
